.Ganache {
  background: #34262a;
  padding-top: 100px;
  text-shadow: none;
  color: #fff;

  /* GENERAL */

  h1, h2, h3, h4, h5, h6 {
    background: #34262a;
    text-shadow: none;
    color: #fff;
  }

  .navbar {
    background: #34262a;
    border-color: #5f474e;

    .navbar-nav > li > a {
      color: #fff;
      transition: opacity .125s ease-in-out;

      &:hover {
        opacity: .6;
      }
    }

    .navbar-toggle .icon-bar {
      background-color: #fff;
    }

    @media screen and (max-width: 767px) {
      .navbar-collapse {
        background: #34262a;
      }
    }
  }

  .Footer {
    background: #34262a;
    border-color: #5f474e;
    color: #fff;

    a {
      color: #27aae1;
      transition: opacity .125s ease-in-out;

      &:hover {
        opacity: .6;
        text-decoration: none;
      }
    }

    .copyright svg path,
    .copyright svg ellipse {
      fill: #fff;
    }

    .BetaSignup {
      h5 {
        color: #fff;
      }

      .FormWrapper {
        border-color: #5f474e;
      }

      .FormWrapper .mc-field-group:first-child {
        border-color: #5f474e;
      }

      .FormWrapper .mc-field-group {
        border-color: #5f474e;
      }

      .FormWrapper label {
        color: #fff;
      }

      .FormWrapper input[type="text"],
      .FormWrapper input[type="email"] {
        background: #34262a;
      }
    }
  }

  /* HELPERS */

  .text-ganache {
    font-family: "Grand Hotel", cursive;
  }

  .btn-orange {
    background-color: #e5a663;
    color: #5f474e;
    border: none;
    text-align: left;
    padding: 12px 18px;
    transition: background-color .125s ease-in-out;

    &:hover {
      background-color: #fff;
    }

    span {
      display: block;
      float: left;
      margin-right: 0;
    }

    img {
      width: 60px;
      height: auto;
      float: right;
      margin-left: 1rem;
    }

    .oswald {
      font-size: 1.5rem;
      margin-top: .3rem;
    }

    .os {
      font-family: "Open Sans", Helvetica, Arial, sans-serif;
      font-size: .8rem;
    }
  }

  /* PAGE */

  .ganache-banner {
    position: relative;
    height: 290px;

    img {
      display: block;
      height: auto;
      width: 1400px;
      position: absolute;
      top: -75px;
      left: 50%;
      transform: translateX(-50%);
    }

    h1 {
      font-family: "Grand Hotel", cursive;
      font-size: 2.8rem;
      margin-top: 240px;
    }
  }

  .row-tagline {
    margin: 2rem -15px;

    @media screen and (max-width: 767px) {
      text-align: center;

      .pull-right {
        float: none !important;
        margin-top: 2rem;
      }
    }
  }

  .os-dl {
    font-size: .8rem;
    margin-top: .5rem;
    text-align: center;

    a {
      color: #fff;
      transition: opacity .125s ease-in-out;

      &:hover {
        text-decoration: none;
        opacity: .6;
      }
    }
  }

  .row-features-heading {
    position: relative;

    h2 {
      background: transparent;
      font-size: 5rem;
      margin-top: 10vw;
    }

    .ganache-goop {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      z-index: -1;
      width: 100%;
    }
  }

  .row-features {
    margin: 60px -15px;

    img {
      max-width: 120px;
    }

    h3 {
      background: transparent;
    }

    p {
      margin-bottom: 0;
    }

    @media screen and (max-width: 767px) {
      [class^="col-"]:last-child {
        margin-top: 60px;
      }
    }
  }

  .row-features-bottom {
    margin-bottom: 120px;
  }

  .row-ganache-pattern {
    background: url("/images/suite/ganache/ganache-pattern.svg");
    background-repeat: repeat;
    background-size: 360px 240px;
    border-top: solid 3px #e5a663;
    padding: 200px 0;

    a {
      text-decoration: none;
      display: block;
      max-width: 600px;
      margin: 0 auto;

      &:hover svg path {
        fill: #fff;
      }
    }

    .well {
      max-width: 600px;
      background: #5f474e;
      color: #fff;
      border: none;
      margin: 0 auto;
      overflow: hidden;
      padding: 3rem;

      svg {
        max-width: 300px;
        height: auto;
        margin: 0 auto 1rem auto;

        path {
          fill: #e5a663;
          transition: fill .125s ease-in-out;
        }
      }

      h2, h3, p {
        margin: 0;
        background: transparent;
      }

      h2 {
        font-size: 2rem;
        margin-bottom: 2rem;
      }

      h3 {
        font-size: 4rem;
      }
    }
  }
}
